---
 layout: false
---
<style>
.pic-run{
	margin: 0 auto;
	overflow:hidden;
	width:400px;
	height:300px;
}
.pic-run>div{
	padding : 0;
	position:relative;
	left:-0px;
}
.pic-run>div>img{
	float:left;
	width:400px;
	height:300px;
}
.pic-btn{
	clear:both;
	text-align: center;
}

</style>
<script>
	
	function slide(d){
		if(slide.time) return;
		var img = document.querySelector('.pic-run img');
		var width = img.width,height = img.height;
		var show = document.querySelector('.pic-run');
		show.style.width = width;show.style.height = height;
		var container = document.querySelector('.pic-run>div');
		var bgleft = parseInt(container.style.left);
		container.style.width = document.querySelectorAll('.pic-run>div>img').length*width;
		var delta = -d*width,aimleft = bgleft+delta;
		if(aimleft<-(parseInt(container.style.width)-width) || aimleft>0) return;
		if(delta==0) return;
		function run(){
			if(bgleft==aimleft){ 
				cancelAnimationFrame(slide.time);
				delete slide.time;
				return;
			}
			if(bgleft<aimleft){
				bgleft+=50;
			}else{
				bgleft-=50;
			}
			container.style.left = bgleft;
			requestAnimationFrame(run)
		}
		slide.time = requestAnimationFrame(run)
	}
</script>
<div class="pic-run">
<div style="left:0;">
<img src='images/pic-1.jpg' />
<img src='images/pic-2.jpg' />
<img src='images/pic-3.jpg' />
<img src='images/pic-4.jpg' />
</div>
</div>

<div class='pic-btn'>
<button onclick='slide(-1)'>Prev</button>
<button onclick='slide(1)'>Next</button>
</div>
<script>
	window.onload = function(){slide(0);};
</script>